<template>
    <div class="echart-body">
        <div v-charts></div>
    </div>
</template>

<script>
    var echarts = require('echarts');
    module.exports = {
        props: ['URI'],
        data: function () {
            return {}
        },
        directives: {
            charts: {
                bind: function () {
                    this.el.style.width = '600px';
                    this.el.style.height = '400px';
                },
                update: function () {
                    var self = this.el;
                    var _this = this.vm;
                    var chartData;
                    $.get(_this.URI).then(function (data) {
                        chartData = data;
                    });
                    var myChart = echarts.init(self);
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '公司热度'
                        },
                        tooltip: {},
                        legend: {
                            data: ['关注次数']
                        },
                        xAxis: {
                            data: ["A公司", "B公司", "C公司", "D公司", "E公司", "F公司"]
                        },
                        yAxis: {},
                        series: [{
                            name: '关注次数',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                unbind: function () {
                    // 清理工作
                    // 例如，删除 bind() 添加的事件监听器
                }
            }
        }
    }
</script>

<style>
    .echart-body {
        width: 600px;
        height: 400px;
        line-height: 400px;
    }
</style>